<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:auth=""
>
<auth:data uri="/system/res/roleTree.json"/>
<head>
    <th:block th:include="common/head::noXadmin('添加岗位')"/>
    <script type="application/javascript" th:src="@{/static/js/jquery.min.js}"></script>
    <script type="application/javascript" th:src="@{/static/lib/ztree/js/jquery.ztree.all.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/lib/ztree/css/metroStyle/metroStyle.css}"/>
</head>
<body class="layui-layout layui-layout-admin">
<div class="layui-container">
    <form class="layui-form " th:action="@{/system/job/add}" method="post">
        <div class="layui-row layui-col-space30 " style="margin: 0px 30px 0px 30px ">
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>基本信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">岗位名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="jobName" autocomplete="off" placeholder="请输入岗位名称" class="layui-input"
                               required lay-verify="required" th:value="${job?.jobName}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">岗位编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="jobCode" lay-verify="required" placeholder="请输入岗位标识"
                               autocomplete="off"
                               class="layui-input" th:value="${job?.jobCode}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNo" value="0" placeholder="排序" autocomplete="off"
                               class="layui-input" lay-verify="required" th:value="${job?.orderNo}">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input id="status" type="hidden" name="status" th:value="${job?.status==null?1:job?.status}">
                        <input type="checkbox" lay-skin="switch" lay-filter="status"
                               lay-text="启用|停用" value="0" th:checked="${job?.status eq 0}">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="remark"
                              th:text="${job?.remark}"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>资源权限</legend>
                </fieldset>
                <input name="resIds" type="hidden" id="resIds"/>
                <div class="layui-form-item " style="max-height: 350px;overflow: scroll;">
                    <div class="layui-input-block">
                        <ul id="treeBox" class="ztree"></ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-row ">
            <div class="layui-form-item">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="ok">保存</button>
                <button type="reset" class="layui-btn layui-btn-danger" lay-filter="close">重置</button>
            </div>
        </div>
    </form>

</div>
<script>
    function syncResIds() {
        var ss = zTreeObj.getCheckedNodes(true);
        var str = "";
        ss.forEach(function (item, idx) {
            str += "," + item.resId
        })
        if (str.length > 0) {
            str = str.substr(1, str.length);
            $("#resIds").val(str);
        }

    }

    var setting = {
            async: {
                enable: true,
                type: "get",
                url: "/system/res/roleTree.json",
                otherParam: ["roleId", "0"],
                dataFilter: function (treeId, parentNode, responseData) {
                    var data = responseData.data;

                    return data;
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox"
            },
            data: {
                key: {
                    name: "resName",
                    title: "resName"
                },
                simpleData: {
                    enable: true,
                    idKey: "resId",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            }, callback: {
                onAsyncSuccess: function (event, treeId, treeNode) {
                    syncResIds();
                }
                ,
                onCheck: function (event, treeId, treeNode) {
                    syncResIds();
                }
            }
        },
        zTreeObj = $.fn.zTree.init($("#treeBox"), setting);
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
        ;
        var code = '[[${code}]]';
        var message = '[[${message}]]';


        if (code == 200) {
            layer.confirm(message, {
                icon: 1,
                title: '提示',
                btn: ["继续", "关闭"]
            }, function (index) {
                layer.close(index);
            }, function (index) {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            });
        }
        form.on('switch(status)', function (data) {
            if (data.elem.checked) {
                $("#status").val(0);
            } else {
                $("#status").val(1);
            }
        })
    });
</script>

</body>

</html>
